<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
      <title>Google Maps for iPod Touch</title>

    <script src="http://www.google.com/jsapi?key=ABQIAAAAUfFiaIhnBZAiG4jwwMoT9hTWfWC2pIebqx1hP5WKIEqB-xxWxhTieDdwFq2lTM5y5g6UtjSVaEkZaQ" type="text/javascript"></script>
    <script src="maps.js" type="text/javascript"></script>

    <script type="text/javascript">
      google.load("maps", "2");
      google.load("search", "1");
      google.setOnLoadCallback(start);
    </script>


    <style type="text/css">
      html, body {
        font-family: Arial,Sans-serif; font-size: 12px;
        width: 320px;
        left:0px;
        top:0px;
        margin:0px;
      }

      #map {
        width: 200%;
        height: 200%;
        z-index: 0;
        position:absolute;
        left:0px;
        top:0px;
      }

      #mapscreen {
        width:100%;
        height:420px;
        position:relative;
      }

      #surface {
        width: 100%;
        height: 100%;
        z-index: 2;
        position:absolute;
        left:0px;
        top:0px;
        overflow:auto;
      }

      #topControls, #bottomControls {
        width: 100%;
        z-index: 3;
        position:absolute;
        left:0px;
        overflow:visible;
      }

      #topControls {
        top:0px;
      }

      #bottomControls {
        bottom:0px;
      }

      #debug {
        font-size: 10.5px;
        position:fixed;
        right:0px;
        bottom:0px;
        border: 1px solid black;
        width: 100px;
        height: 20px;
        z-index: 1000;
        display:none;
      }

      .buttonsPanel {
        background-color:#0E3267;
        font-weight:bold;
        font-size: 10.5px;
        opacity: 0.5;
        z-index: 3;
      }

      .button, .buttonOn, .buttonDisabled {
        border: 1px solid black;
        color: #FFFFFF;
        z-index: 5;
        padding: 10px;
        text-align:center;
        text-decoration: none;
        display:block;
      }

      .buttonOn {
        color: red;
      }

      .buttonDisabled {
        color: gray;
        opacity:0.5;
      }

      #zoomPanel {
        position:absolute;
        left:0px;
        top:0px;
      }

      #zoomInButton, #zoomOutButton {
        font-size: 25px;
        padding-top:5px;
        padding-bottom:5px;
      }

      #expandedViewPanel, #viewDropDown {
        position:absolute;
        right:0px;
        top:0px;
      }

      #goPanel {
        position:absolute;
        left:0px;
        bottom:0px;
        display:block;
      }

      #searchOptionsPanel {
        position:absolute;
        left:0px;
        bottom:32px;
        display:none;
      }

      #promptGlass {
        position:absolute;
        width:100%;
        height:100%;
        opacity:0.5;
        background-color:#0E3267;
        z-index: 100;
      }

      #directionsPanel,#localSearchPanel {
        position:absolute;
        width:100%;
        bottom:0px;
        left:0px;
        z-index:3;
      }

      #localSearchPanel {
        height:0px;
        overflow:visible;
      }

      .prompt {
        position:absolute;
        left: 20%;
        top: 20%;
        width:60%;
        z-index: 101;
        display:none;
      }

      #singleLocationInput {
        width: 200px;
      }

      #singleLocationSelect {
        width: 200px;
      }

      #localSearchInput {
        width: 100%;
      }

      #goToggle {
        padding:0px;
      }

      #businessDescription,#stepDescription {
        font-size: 10.5px;
        font-weight:normal;
        opacity:0.75;
        padding:5px;
        position:absolute;
        bottom:0px;
        color:#FFFFFF;
      }

      #searchContent {
        width:310px;
        position:relative;
        overflow:visible;
        left:0px;
        z-index: 50;
      }

      #setBusinessAsCurrentButton,#moreBusinessButton {
        padding:3px;
      }

      #localSearchControlsPanel, #directionsControlsPanel {
        opacity:0.75;
        position:absolute;
        right:0px;
        bottom:0px;
      }

      #moreInfo {
        font-size: 10.5px;
      }

      #instructions {
        font-size: 14px;
        color:#FFFFFF;
        width:300px;
        left:10px;
        top:10px;
      }

      #instructions a {
        color:white;
      }

    </style>

  <body onload="window.setTimeout('hideAddressBar();', 1);">
    <div id="mapscreen">
      <div id="surface">
	<div id="map"></div>
      </div>

    <div id="zoomPanel" class="buttonsPanel">
      <a href="javascript:void 0;" id="zoomInButton" class="button">+</a>
      <a href="javascript:void 0;" id="zoomOutButton" class="button">&#8722;</a>
    </div>

    <div id="viewDropDown" class="buttonsPanel">
      <a href="javascript:void 0;" id="viewDropDownButton" class="button">View &#9660;</a>
    </div>

    <div id="expandedViewPanel" class="buttonsPanel" style="display:none;">
      <a href="javascript:void 0;" id="streetButton" class="buttonOn">Street</a>
      <a href="javascript:void 0;" id="satelliteButton" class="button">Satellite</a>
      <a href="javascript:void 0;" id="hybridButton" class="button">Hybrid</a>
      <a href="javascript:void 0;" id="trafficButton" class="button">Traffic</a>
    </div>

    <div id="goPanel" class="buttonsPanel">
      <a href="javascript: void 0;" id="goToggle" class="button">
	<table cellspacing=0 cellpadding=0><tr>
	  <td><img src="herearrow.png" border="0"></img></td>
	  <td><span id="currentLocationName">loading...</span> &#9650;</td>
	</tr></table>
      </a>
    </div>

    <div id="searchOptionsPanel" class="buttonsPanel">
      <a href="javascript: void 0;" id="locationButton" class="button">Go to...</a>
      <a href="javascript: void 0;" id="driveToHereButton" class="button">Drive to here from...</a>
      <a href="javascript: void 0;" id="driveFromHereButton" class="button">Drive from here to...</a>
      <a href="javascript: void 0;" id="localSearchButton" class="button">Search businesses...</a>
    </div>

    <div id="singleLocationPicker" class="prompt">
      <table width="100%" style="color:#FFFFFF;font-weight:bold;">
        <tr><td>Enter new: <input id="singleLocationInput"></td></tr>
        <tr><td>Or...</td></tr>
	<tr><td><select id="singleLocationSelect"></select></td></tr>
        <tr><td><button id="singleLocationCancel">Cancel</button></td></tr>
      </table>
    </div>

    <div id="localQueryPicker" class="prompt" style="display:none;">
      <table width="100%" style="color:#FFFFFF;font-weight:bold;">
        <tr><td>Business name or category:<input id="localQueryInput"></td></tr>
        <tr><td><button id="localQueryCancel">Cancel</button></td></tr>
      </table>
    </div>

    <div id="directionsPanel" style="display:none;">
      <div id="stepDescription" class="buttonsPanel">hey come do this!</div>
      <table class="buttonsPanel" id="directionsControlsPanel">
	<tr><td><a href="javascript: void 0;" id="nextStepButton" class="button">&gt;</a></td></tr>
	<tr><td><a href="javascript: void 0;" id="lastStepButton" class="button">&lt;</a></td></tr>
	<tr><td><a href="javascript: void 0;" id="closeDirectionsButton" class="button">X</a></td></tr>
      </tr></table>
    </div>

    <div id="localSearchPanel" style="display:none;">
      <div id="businessDescription" class="buttonsPanel">title...</div>
      <table class="buttonsPanel" id="localSearchControlsPanel">
	<tr><td><a href="javascript: void 0;" id="nextBusinessButton" class="button">&gt;</a></td></tr>
	<tr><td><a href="javascript: void 0;" id="lastBusinessButton" class="button">&lt;</a></td></tr>

	<tr><td><a href="javascript: void 0;" id="setBusinessAsCurrentButton" class="button"><img src="herearrow.png" border="0"></a></td></tr>
	<tr><td><a href="javascript: void 0;" id="moreBusinessButton" class="button"><img src="out.png" border="0"></a></td></tr>
	<tr><td><a href="javascript: void 0;" id="closeLocalSearchButton" class="button">X</a></td></tr>
      </table>
    </div>

    <div id="businessPopup" style="display:none;">
      <div id="businessPopupTitle"></div>
      <div id="businessPopupAddress"></div>
      <div id="businessPopupNumbers"></div>
    </div>

    <div id="promptGlass" style="display:none;"></div>

    </div>

    <div id="debug"></div>

    <div id="searchContent" style="display:none;"></div>

    <div id="instructions" class="prompt" style="dipslay:none;">
      <p><strong>Drag the map around</strong> using <strong>two fingers!</strong>.</p>
      <p><strong>Zoom in and out</strong> using the buttons on the upper left.</p>
      <p><strong>Switch map type</strong>, or <strong>toggle traffic overlay</strong> using the menu on the upper right.</p>
      <p><strong>Go somewhere, get driving directions, or search for businesses</strong> using the menu on the lower left.</p>
      <p><strong>See all directions or local search results at once</strong> by scrolling down below the map after you've done a search.</p>
      <p><strong><a href="mapsfaq.html" target="_blank">Read the FAQ</a></strong> for more info!</p>

      <p align="center"><button id='closeInstructionsButton'>OK!</button></p>

      <p align="center" style="font-size:10.5px;">created by <a href='mailto:touchmaps@grapier.com'>grapier</a>; &copy; 2007</p>

    </div>

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-2413612-2";
urchinTracker();
hideAddressBar();
</script>
  </body></html>
